<template>
    <view class="container">
        <view class="guide-list">
            <view class="guide-item" v-for="(item, index) in guideList" :key="index">
                <view class="step-number">{{ index + 1 }}</view>
                <view class="step-content">
                    <view class="step-title">{{ item.title }}</view>
                    <view class="step-desc">{{ item.desc }}</view>
                    <image 
                        v-if="item.image" 
                        :src="item.image" 
                        mode="widthFix" 
                        class="step-image"
                    ></image>
                </view>
            </view>
        </view>

        <view class="contact-service">
            <text>如遇问题，请联系客服</text>
            <button class="service-btn" @tap="callService">联系客服</button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            guideList: [
                {
                    title: '扫描二维码',
                    desc: '打开小程序首页，点击扫码按钮，扫描设备上的二维码',
                    image: '/static/images/guide/step1.png'
                },
                {
                    title: '支付费用',
                    desc: '确认设备信息和费用后，完成支付',
                    image: '/static/images/guide/step2.png'
                },
                {
                    title: '开始使用',
                    desc: '支付成功后设备自动开锁，即可开始使用',
                    image: '/static/images/guide/step3.png'
                },
                {
                    title: '结束使用',
                    desc: '使用完毕后，在订单页面点击"结束使用"即可',
                    image: '/static/images/guide/step4.png'
                }
            ]
        }
    },
    methods: {
        callService() {
            uni.makePhoneCall({
                phoneNumber: '400-888-8888'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    min-height: 100vh;
    background-color: #fff;
    padding: 30rpx;
    
    .guide-list {
        .guide-item {
            display: flex;
            margin-bottom: 60rpx;
            
            .step-number {
                width: 60rpx;
                height: 60rpx;
                background: #07c160;
                color: #fff;
                border-radius: 30rpx;
                text-align: center;
                line-height: 60rpx;
                font-size: 32rpx;
                margin-right: 30rpx;
                flex-shrink: 0;
            }
            
            .step-content {
                flex: 1;
                
                .step-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 10rpx;
                }
                
                .step-desc {
                    font-size: 28rpx;
                    color: #666;
                    margin-bottom: 20rpx;
                }
                
                .step-image {
                    width: 100%;
                    border-radius: 12rpx;
                }
            }
        }
    }
    
    .contact-service {
        text-align: center;
        margin-top: 60rpx;
        padding: 30rpx;
        
        text {
            font-size: 28rpx;
            color: #999;
            display: block;
            margin-bottom: 20rpx;
        }
        
        .service-btn {
            width: 400rpx;
            height: 80rpx;
            line-height: 80rpx;
            background: #07c160;
            color: #fff;
            font-size: 28rpx;
            border-radius: 40rpx;
        }
    }
}
</style> 